<template>
  <el-drawer v-model="drawerVisible" direction="rtl" class="drawer-main">
    <template #header>
      <h2 style="font-weight: bold">aqi计算公式</h2>
    </template>
    <template #default>
      <div class="drawer-default">
        <el-image src="/icons/aqiComputer.png"></el-image>
        <el-image class="aqi-explain" src="/icons/explain.png"></el-image>
      </div>
    </template>
    <template #footer>
      <div class="footer-btn">
        <el-button @click="cancelClick">取消</el-button>
      </div>
    </template>
  </el-drawer>
</template>

<script setup>
import { useStatisticsStore } from '@/stores/statistics/statistics.js'
import { storeToRefs } from 'pinia'

const statisticsStore = useStatisticsStore()
const { drawerVisible } = storeToRefs(statisticsStore)

const cancelClick = () => {
  drawerVisible.value = false
}
</script>

<style scoped lang="scss">
.drawer-main {
  display: flex;
  justify-content: center;
  .cell-item {
    width: 100px;
  }

  .drawer-default {
    margin-top: 50px;
    .aqi-explain {
      margin-top: 50px;
      width: 350px;
      margin-left: 20px;
    }
  }

  .footer-btn {
    display: flex;
    justify-content: space-between;
    margin-left: 50px;
    margin-right: 50px;
    margin-bottom: 50px;
  }

  .drawer-title {
    font-size: 16px;
    font-weight: bold;
    color: #444549;
  }
}
</style>
